import React, { useEffect } from 'react';
import { AlertCircle, X } from 'lucide-react';

interface ToastProps {
  message: string;
  type?: 'error' | 'success' | 'warning';
  onClose?: () => void;
  consumedTime?: number;
}

export function Toast({ message, type = 'error', onClose, consumedTime = 3000 }: ToastProps) {
  useEffect(() => {
    if (consumedTime && onClose) {
      const timer = setTimeout(onClose, consumedTime);
      return () => clearTimeout(timer);
    }
  }, [consumedTime, onClose]);

  const bgColor = type === 'error' ? 'bg-red-50' : 
                 type === 'success' ? 'bg-green-50' : 
                 'bg-yellow-50';
                 
  const textColor = type === 'error' ? 'text-red-700' : 
                   type === 'success' ? 'text-green-700' : 
                   'text-yellow-700';

  return (
    <div className={`fixed top-4 right-4 z-50 flex items-center ${bgColor} ${textColor} px-4 py-3 rounded-lg shadow-lg`}>
      <AlertCircle className="mr-2" size={20} />
      <span className="mr-2">{message}</span>
      {onClose && (
        <button onClick={onClose} className="ml-2">
          <X size={16} />
        </button>
      )}
    </div>
  );
}